<template>
	<view class="order_info" id="order_info">
		<van-tabs :active="active" @change="tabChange" color="#007aff">
		  <van-tab title="发单客户">
			  <view class="send_author">
			  	<van-field
			  	    :value="active"
					left-icon="orders-o"
					label="订单编号"
			  	    disabled
			  	  />
				  
				  <van-field
				      :value="active"
				  	left-icon="manager-o"
				  	label="用户姓名"
				      disabled
				    />
				  
				  <van-field
				      :value="active"
					  left-icon="phone-o"
				  	label="手机号码"
				      disabled
				    />
				  
				  <van-field
				      :value="address"
					  type="textarea"
					  autosize
					  left-icon="location-o"
				  	label="服务地址"
				      disabled
				    />
					
					<van-field
					    :value="active"
						left-icon="expand-o"
						label="服务面积"
					    disabled
					  />
					  
				<van-field
				    :value="active"
					left-icon="balance-o"
					label="订单报价"
				    disabled
				  />
				  
				  <van-field
				      :value="active"
					  left-icon="refund-o"
				  	label="预付金"
				      disabled
				    />
					
					<van-field
					    :value="active"
						left-icon="setting-o"
						label="订单状态"
					    disabled
					  />
			  </view>
		  </van-tab>
		  <van-tab title="接单技工">
			  <view class="master">
			  	
			  				  
			  				  <van-field
			  				      :value="active"
			  				  	left-icon="manager-o"
			  				  	label="技工姓名"
			  				      disabled
			  				    />
			  				  
			  				  <van-field
			  				      :value="active"
			  					  left-icon="phone-o"
			  				  	label="手机号码"
			  				      disabled
			  				    />
			  				  <van-field
			  				      :value="active"
			  				  	left-icon="star-o"
			  				  	label="服务评分"
			  				      disabled
			  				    />
			  				 
			  				
			  </view>
		  </van-tab>
		</van-tabs>
		
		<!-- 订单完成后弹出评价 -->
		<view class="dialog">
			<van-dialog
			  use-slot
			  :title="dialog.title"
			  :show="dialog.show"
			  show-cancel-button
			  @close="dialogClose"
			>
			  <view class="rate" id="rate">
			  	<view class="star">
			  		<view class="rate_text">
			  			<text class="iconfont icon-star" style="color: orange;margin-right: 20rpx;"></text>服务评价
			  		</view>
			  		<view class="rate_star">
			  			<van-rate
			  			 :value="starVal"
			  			 icon="like"
			  			 void-icon="like-o"
			  			 @change="starChange"
			  			/>
			  		</view>
			  		<view class="rate_text">
			  			<text class="iconfont icon-xieyi" style="color: orange;margin-right: 20rpx;"></text>评价内容
			  		</view>
			  		<view class="inner">
			  			<van-field
			  			    :value="rateTxt"
			  				type="textarea"
			  				autosize="true"
			  			    placeholder="说点什么吧"
			  			    @change="innerChange"
			  			  />
			  		</view>
			  		
			  	</view>
			  </view>
			</van-dialog>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				address: "服务地址",
				dialog: {
					title: "服务评价",
					show: true,
				}
			}
		},
		methods: {
			// 切换标签
			tabChange(e) {
				console.log(e);
			},
			// dialog关闭
			dialogClose(e) {
				this.dialog.show = false
			},
			// 评价变化
			innerChange(e) {
				
			},
			// star变化
			starChange(e) {
				
			},
		}
	}
</script>

<style scoped lang="scss">
	#order_info {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.send_author {
			margin-top: 40rpx;
		}
	}
	#rate {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.star {
			width: 100%;
			.rate_text {
				padding: 10rpx 0;
			}
			.inner {
				.inner_txt {
					border: 1px solid #f2f2f2;
					border-radius: 30rpx;
					height: 200rpx;
				}
			}
		}
	}
</style>
